<style lang="less">
  .liveApp {
    display: flex;
padding:136px 0 0 0!important;
  .leftBar {
    transition: all .4s;
  }
  }
  .main {
    padding-left: 20px;
  }
</style>
<template>
  <div class="liveApp">
  <div class="leftBar" :style="{'width':sldieBarWidth}"><SlideBar @isCollapseHandler="isCollapseHandler"/></div>
   <div class="main">
      <!-- <transition mode="out-in"> -->
        <router-view></router-view>   
    <!-- </transition> -->
   </div>
  </div>
</template>
<script>
import SlideBar from './components/SlideBar'
export default {
   name: "liveApp",
   components: {
     SlideBar
   },
   data () {
     return {
       sldieBarWidth: '200px',
     }
   },
   methods: {
     isCollapseHandler(sldieBarWidth) {
       this.sldieBarWidth = sldieBarWidth !== 'closeMenu' ?  '64px' : '200px'
     }
   }
}
</script>